import React from 'react';
import { FlatList, View } from 'react-native';
import { ProductItem } from 'bee/components/Sales';
import { px2dp } from 'bee/utils/px2dp';

// @flow
type Props = {
  navigation: object,
};

class All extends React.Component<Props> {
  constructor() {
    super();

    this.renderItem = this.renderItem.bind(this);
  }

  renderItem({ data }) {
    const { navigate } = this.props.navigation;

    return (
      <ProductItem
        data={data}
        onPress={
          () =>
            // navigate('ProductDetails', {
            //   riskname: '中国人寿XX保险',
            //   insured: '1000',
            //   sellPoint: ['超百种疾病', '超百万保障', '一次性给付'],
            //   insurancePlan: [
            //     {
            //       key: '投保方案',
            //       data: [
            //         {
            //           left: '被保人年龄',
            //           right: '18-60岁',
            //         },
            //         {
            //           left: '保障计划',
            //           right: '30万',
            //         },
            //         {
            //           left: '保障期间',
            //           right: '1年',
            //         },
            //       ],
            //     },
            //   ],
            //   guaranteeRange: [
            //     {
            //       key: '保障范围',
            //       data: [
            //         {
            //           left: '100种重大疾病保险金',
            //           right: '50万元',
            //         },
            //         {
            //           left: '20种特定重大疾病保险金',
            //           right: '50万元',
            //         },
            //         {
            //           left: '30种轻症疾病保险金',
            //           right: '100万元',
            //         },
            //       ],
            //     },
            //   ],
            // })
            navigate('ProductDetails')
          // navigate('MakePlan')
        }
      />
    );
  }

  render() {
    return (
      <View>
        <FlatList
          data={new Array(10).fill(0)}
          renderItem={this.renderItem}
          ItemSeparatorComponent={() => (
            <View
              style={{
                height: px2dp(20),
              }}
            />
          )}
        />
      </View>
    );
  }
}

export default All;
